<template>
  <div class="app-container home">
    <el-row type="flex" justify="center" :gutter="10">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>能耗总览</span>
          </div>
          <div>
            <el-row type="flex" justify="center" :gutter="10">
              <el-col>
                <el-card class="today">
                  <div class="font-title">
                    <span>今日总能耗</span>
                  </div>
                  <div class="font-content">
                    1231233
                  </div>
                </el-card>
              </el-col>
              <el-col>
                <el-card class="month">
                  <div class="font-title">
                    <span>本月总能耗</span>
                  </div>
                  <div class="font-content">
                    123213123
                  </div>
                </el-card>
              </el-col>
              <el-col>
                <el-card class="year">
                  <div class="font-title">
                    <span>本年总能耗</span>
                  </div>
                  <div class="font-content">
                    1321123123
                  </div>
                </el-card>
              </el-col>
              <el-col>
                <el-card class="year-save">
                  <div class="font-title">
                    <span>本年总减排</span>
                  </div>
                  <div class="font-content">
                    1321123123
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" :gutter="10" style="margin-top:10px;">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>能耗排行</span>
          </div>
          <div>
            <el-table v-loading="loading" :data="equipmentPowerReportList">
              <el-table-column label="设备名称" align="center" prop="equipmentName" />
              <el-table-column label="已产数量" align="center" prop="productQuantity" />
              <el-table-column label="单位耗电量" align="center" prop="powerConsume" />
              <el-table-column label="总耗电量" align="center" prop="totalPowerConsume" />
              <el-table-column label="单位碳排放" align="center" prop="carbonEmission" />
              <el-table-column label="总碳排放" align="center" prop="totalCarbonEmission" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>单位能耗</span>
          </div>
          <div></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" :gutter="10" style="margin-top:10px;">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>综合能耗</span>
          </div>
          <div></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>能耗占比</span>
          </div>
          <div></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" :gutter="10" style="margin-top:10px;">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>能耗地图</span>
          </div>
          <div></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>用能统计</span>
          </div>
          <div></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      equipmentPowerReportList: [],
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
}
.font-content {
  font-size: 18px;
}
.font-title {
  font-size: 20px;
  padding-bottom: 20px;
}
.today {
  background-color: #60cfeb;
  color: aliceblue;
}
.month {
  background-color: #f7b018;
  color: aliceblue;
}
.year {
  background-color: #fb846c;
  color: aliceblue;
}
.year-save {
  background-color: #28b976;
  color: aliceblue;
}
</style>

